<template>
  <div class="mind-map-container">
    <el-button @click="exportPng" size="small"
      style="position: absolute;top: 20px;z-index: 9;left: 20px;">下载思维导图</el-button>

    <div id="mindMapContainer" @dragenter.stop.prevent @dragleave.stop.prevent @dragover.stop.prevent
      @drop.stop.prevent></div>

  </div>

</template>

<script>
import MindMap from 'simple-mind-map'
import Export from 'simple-mind-map/src/plugins/Export.js'
import MiniMap from 'simple-mind-map/src/plugins/MiniMap.js'
  import ExportXMind from 'simple-mind-map/src/plugins/ExportXMind.js'
export const defaultData = {
  // data: {
  //   text: '根节点',
  //   // expand: true,
  //   // isActive: true,
  // },
  // children: [],
}
let mindMapInstance = null;
// 注册插件
MindMap.usePlugin(MiniMap)
  .usePlugin(Export)
  .usePlugin(ExportXMind)
  .usePlugin(TouchEvent)

export default {
  props: {
    name: {
      type: String,
      default: '思维导图',
    },
    mindData: {
      type: Object,
      default() {
        return defaultData
      },
    },
  },
  data() {
    return {

    }
  },
  computed: {
    showScale() {
      return (this.scale * 100).toFixed(0)
    },
  },
  mounted() {
    this.init()
  },
  unmounted() {
    mindMapInstance.destroy()
  },
  watch: {
    mindData() {
      mindMapInstance.destroy()
      this.init()
    },
  },
  methods: {
    handleChange(file) {
      const that = this
      // ElMessageBox.confirm('是否直接替换当前思维导图?', '警告', {
      //   confirmButtonText: '确认',
      //   cancelButtonText: '取消',
      //   type: 'warning',
      // })
      //   .then(() => {
      //     const { raw } = file
      //     xmind.parseXmindFile(raw).then(data => {
      //       that.setData(data)
      //     })
      //   })
      //   .catch(() => {})
    },
    activePanel(type) {
      this.activedPanel = type === this.activedPanel ? '' : type
    },
    setIcon(type, name) {
      if (this.activeNodes.length === 0) return
      let key = type + '_' + name
      // 检查当前节点是否存在该图标
      let index = this.currentIconList.findIndex(item => {
        return item === key
      })
      // 存在则删除icon
      if (index !== -1) {
        this.currentIconList.splice(index, 1)
      } else {
        // 否则判断当前图标是否和要插入的图标是一个组的
        let typeIndex = this.currentIconList.findIndex(item => {
          return item.split('_')[0] === type
        })
        // 是一个组的则进行替换
        if (typeIndex !== -1) {
          this.currentIconList.splice(typeIndex, 1, key)
        } else {
          // 否则添加icon
          this.currentIconList.push(key)
        }
      }
      this.activeNodes.forEach(node => {
        node.setIcon([...this.currentIconList])
      })
    },
    getData() {
      return mindMapInstance.getData(true)
    },
    setData(data) {
      mindMapInstance.setData(data)
    },
    exportPng() {
      mindMapInstance.export('xmind', true, this.name)
    },
    init() {
      let _this = this;
      const data = this.mindData || defaultData
      let mindData = data
      if (data.root) {
        //   this.layout = data.layout
        //   this.theme = data.theme.template
        mindData = data.root
      }
      mindMapInstance = new MindMap({
        enableFreeDrag: false,
        readonly: true,
        //   layout: this.layout, // 'logicalStructure',
        //   theme: this.theme,
        el: document.getElementById('mindMapContainer'),
        mousewheelAction: 'zoom', // zoom（放大缩小）、move（上下移动）
        data: mindData,
        fit: true,
        nodeTextEditZIndex: 1000,
        nodeNoteTooltipZIndex: 1000,
        initRootNodePosition: ['center', 'center'],
      })
      mindMapInstance.on('scale', e => {
        this.scale = Number(e.toFixed(2))
      })
      mindMapInstance.on('node_click', e => {
        _this.$emit('node_click',e.nodeData)
        // console.log('---------',e.nodeData);
        
      })
      

      mindMapInstance.on('node_active', (...args) => {
        this.activeNodes = args[1]
        if (this.activeNodes.length > 0) {
          let firstNode = this.activeNodes[0]
          this.currentIconList = firstNode.getData('icon') || []
        } else {
          this.currentIconList = []
        }
        console.log('------',this.activeNodes[0].nodeData);
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.mind-map-container,
#mindMapContainer {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
</style>